<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      border: solid;
      border-collapse: separate;
      /* border-collapse: collapse; */
      border-spacing: 10px 20px;
      /* caption-side: top; */
      caption-side: bottom;
      /* empty-cells: show; */
      empty-cells: hide;
      width: 400px;
      table-layout: fixed;
    }

    table thead th,
    table tbody td {
      border: solid;
    }
  </style>

</head>

<body>
  <table>
    <caption>用户表</caption>
    <thead>
      <tr>
        <th>name</th>
        <th>age</th>
        <th>gender</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>my name is jack my name is jack my name is jack my name is jack</td>
        <td>20</td>
        <td>boy</td>
      </tr>
      <tr>
        <td>lili</td>
        <td>21</td>
        <td>gril</td>
      </tr>
      <tr>
        <td>lucy</td>
        <td>20</td>
        <td>gril</td>
      </tr>
    </tbody>
  </table>
</body>

</html>